<template>
<div>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
     v-dialogDrag
    :visible.sync="visible">
    <el-form :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"  :disabled="method==='view'"
             label-width="120px">
      <el-row  :gutter="15">
        <el-col :span="12">
            <el-form-item label="设备名称" prop="name"
                :rules="[
                 ]">
              <el-input v-model="inputForm.name" placeholder="请填写设备名称"     ></el-input>
           </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="部件名称" prop="units" :rules="[{required: true, message:'部件不能为空', trigger:'blur'}]">
             <el-select v-model="parts" placeholder="请选择" @change="handleChangeUnits">
              <el-option v-for="item in inputForm.partsData" :key="item.fileCode" :label="item.fileDevicename" :value="item.fileCode" ref="units"></el-option>
             </el-select>
            </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="零件名称" prop="part" :rules="[]">
             <el-select v-model="component" placeholder="请选择" @change="handleChangePart">
               <el-option v-for="item in inputForm.componentData" :key="item.fileCode" :label="item.fileDevicename" :value="item.fileCode" ref="part"></el-option>
             </el-select>
             </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="备注信息" prop="remarks"
                :rules="[
                 ]">
          <el-input type="textarea" v-model="inputForm.remarks" placeholder="请填写备注信息"     ></el-input>
           </el-form-item>
        </el-col>
    <el-col :span="24">
     <el-form-item label-width="0">
            <el-tabs v-model="basicCheckMainFormTab">
            <el-tab-pane label="设备点检标准">
                  <el-button size="small" @click="addBasicdataCheckRow" type="primary">新增</el-button>
                  <el-table
                  border
                  :data="inputForm.basicdataCheckList.filter(function(item){ return item.delFlag !== '1'})"
                  style="width: 100%">
                <el-table-column
                    prop="coding"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="编码">
                  </el-table-column>
                <el-table-column
                    prop="checkProject"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="检查项目">
                  </el-table-column>
                <el-table-column
                    prop="content"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="内容">
                  </el-table-column>
                <el-table-column
                    prop="job"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="专职">
                  </el-table-column>
                <el-table-column
                    prop="fix"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="检修">
                  </el-table-column>
                <el-table-column
                    prop="post"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="岗位">
                  </el-table-column>
                <el-table-column
                    prop="checkJob"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="点检分工">
                    <template slot-scope="scope">
                        {{scope.row.checkJob.split(",").map( (item)=> { return $dictUtils.getDictLabel("check_job", item, '-')}).join(",")  }}
                    </template>
                  </el-table-column>
                <el-table-column
                    prop="equipment"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="设备状态">
                    <template slot-scope="scope">
                        {{ $dictUtils.getDictLabel("device_state", scope.row.equipment, '-') }}
                    </template>
                  </el-table-column>
                <el-table-column
                    prop="method"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="点检方法">
                    <template slot-scope="scope">
                        {{scope.row.method.split(",").map( (item)=> { return $dictUtils.getDictLabel("check_method", item, '-')}).join(",")  }}
                    </template>
                  </el-table-column>
                <el-table-column
                    prop="kind"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="类别">
                  </el-table-column>
                <el-table-column
                    prop="symbol"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="计量单位">
                  </el-table-column>
                <el-table-column
                    prop="judge"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="判断符号">
                  </el-table-column>
                <el-table-column
                    prop="opinion"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="判断">
                  </el-table-column>
                <el-table-column
                    prop="up"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="上限">
                  </el-table-column>
                <el-table-column
                    prop="extremity"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="极限">
                  </el-table-column>
                <el-table-column
                    prop="people"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="责任人">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                      <el-button @click="viewBasicdataCheckRow(scope.row)" type="text" size="small">查看</el-button>
                      <el-button  @click="editBasicdataCheckRow(scope.row)" type="text" size="small">编辑</el-button>
                      <el-button  @click="delBasicdataCheckRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            <el-tab-pane label="设备给油脂标准">
                  <el-button size="small" @click="addBasicDataGiveoilRow" type="primary">新增</el-button>
                  <el-table
                  border
                  :data="inputForm.basicDataGiveoilList.filter(function(item){ return item.delFlag !== '1'})"
                  style="width: 100%">
                <el-table-column
                    prop="number"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="序号">
                  </el-table-column>
                <el-table-column
                    prop="coding"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="编码">
                  </el-table-column>
                <el-table-column
                    prop="part"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="给油脂部位">
                  </el-table-column>
                <el-table-column
                    prop="method"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="润滑方式">
                  </el-table-column>
                <el-table-column
                    prop="card"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="油脂牌号">
                  </el-table-column>
                <el-table-column
                    prop="a"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="润滑点数">
                  </el-table-column>
                <el-table-column
                    prop="b"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="油量L">
                  </el-table-column>
                <el-table-column
                    prop="c"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="周期">
                  </el-table-column>
                <el-table-column
                    prop="d"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="油量L">
                  </el-table-column>
                <el-table-column
                    prop="e"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="周期">
                  </el-table-column>
                <el-table-column
                    prop="check"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="点检">
                  </el-table-column>
                <el-table-column
                    prop="repair"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="检修">
                  </el-table-column>
                <el-table-column
                    prop="post"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="岗位">
                  </el-table-column>
                <el-table-column
                    prop="people"
                    header-align="center"
                    align="center"
                    show-overflow-tooltip
                    label="责任人">
                  </el-table-column>
                  <el-table-column
                    fixed="right"
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                      <el-button @click="viewBasicDataGiveoilRow(scope.row)" type="text" size="small">查看</el-button>
                      <el-button  @click="editBasicDataGiveoilRow(scope.row)" type="text" size="small">编辑</el-button>
                      <el-button  @click="delBasicDataGiveoilRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </el-tab-pane>
            </el-tabs>
           </el-form-item>
          </el-col>
        </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" v-if="method != 'view'" @click="doSubmit()" v-noMoreClick>确定</el-button>
    </span>
  </el-dialog>
  <BasicdataCheckForm ref="basicdataCheckForm" @addRow="saveBasicdataCheckRow(arguments)"></BasicdataCheckForm>
  <BasicDataGiveoilForm ref="basicDataGiveoilForm" @addRow="saveBasicDataGiveoilRow(arguments)"></BasicDataGiveoilForm>
</div>
</template>

<script>
  import BasicdataCheckForm from './BasicdataCheckForm'
  import BasicDataGiveoilForm from './BasicDataGiveoilForm'
  export default {
    data () {
      return {
        title: '',
        method: '',
        visible: false,
        loading: false,
        basicCheckMainFormTab: '0',
        inputForm: {
          id: '',
          units: '',
          part: '',
          basicdataCheckList: [],
          basicDataGiveoilList: [],
          name: '',
          unit: '',
          remarks: '',
          partsData: [], // 部件数据
          componentData: [] // 零件数据
        },
        parts: '', // 首级下拉框prop
        component: '' // 子级下拉框prop
      }
    },
    watch: {
      // 监测首级下拉框变化
      parts (newVal, oldVal) {
        console.log(this.inputForm.units)
        this.$http({
          url: `/basicdata/basictree/partDevice/nextLevelTreeData`,
          method: 'get',
          params: {
            id: newVal
          }
        }).then(({ data }) => {
          this.inputForm.componentData = data.data
        })
      },
      // 监测子级下拉框变化
      component (afternNewVal, afternOldVal) {
        console.log(this.inputForm.part)
        console.log(afternNewVal)
        console.log(afternOldVal)
      }
    },
    components: {
      BasicdataCheckForm,
      BasicDataGiveoilForm
    },
    methods: {
      // 选中下拉框所返回的函数
      handleChangeUnits (val) {
      // 传进来的val是select组件选中的value值，也就是一个fruitEnName
        var obj = {}
        obj = this.inputForm.partsData.find(function (item) {
          return item.fileCode === val
        })
        this.inputForm.part = obj.fileDevicename
      // obj 就是被选中的那个对象，也就能拿到label值了。
        console.log(obj.fileDevicename) // label值
        console.log(val) // value值
      },
      // 选中下拉框所返回的函数
      handleChangePart (val) {
      // 传进来的val是select组件选中的value值，也就是一个fruitEnName
        var obj = {}
        obj = this.inputForm.componentData.find(function (item) {
          return item.fileCode === val
        })
        this.inputForm.unit = obj.fileDevicename
      // obj 就是被选中的那个对象，也就能拿到label值了。
        console.log(obj.fileDevicename) // label值
        console.log(val) // value值
      },
      // 获取下一层级节点
      // 需要传入想要获取下一级树的数据的父级id参数（比如传三级id此方法获取4级数据）
      getNextNode (presentNode) {
        this.$http({
          url: `/basicdata/basictree/partDevice/nextLevelTreeData`,
          method: 'get',
          params: {
            id: presentNode
          }
        }).then(({ data }) => {
          this.inputForm.partsData = data.data
        })
      },
      init (method, id) {
        this.method = method
        if (method === 'add') {
          this.title = `新建报表`
        } else if (method === 'edit') {
          this.title = '修改报表'
        } else if (method === 'view') {
          this.title = '查看报表'
        }
        this.visible = true
        this.loading = false
        this.$nextTick(() => {
          this.$refs.inputForm.resetFields()
          this.inputForm.id = id
          this.basicCheckMainFormTab = '0'
          this.inputForm.basicdataCheckList = []
          this.inputForm.basicDataGiveoilList = []
          if (method === 'edit' || method === 'view') { // 修改或者查看
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicCheckMainForm/queryById?id=${this.inputForm.id}`,
              method: 'get'
            }).then(({data}) => {
              this.inputForm = this.recover(this.inputForm, data.basicCheckMainForm)
              this.loading = false
            })
          }
        })
      },
      saveBasicdataCheckRow (child) {
        if (child[0] === '') {
          this.inputForm.basicdataCheckList.push(child[1])
        } else {
          this.inputForm.basicdataCheckList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.basicdataCheckList.splice(index, 1, child[1])
            }
          })
        }
      },
      addBasicdataCheckRow (child) {
        this.$refs.basicdataCheckForm.init('add')
      },
      viewBasicdataCheckRow (child) {
        this.$refs.basicdataCheckForm.init('view', child)
      },
      editBasicdataCheckRow (child) {
        this.$refs.basicdataCheckForm.init('edit', child)
      },
      delBasicdataCheckRow (child) {
        this.inputForm.basicdataCheckList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.basicdataCheckList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.basicdataCheckList.splice(index, 1, item)
          }
        })
      },
      saveBasicDataGiveoilRow (child) {
        if (child[0] === '') {
          this.inputForm.basicDataGiveoilList.push(child[1])
        } else {
          this.inputForm.basicDataGiveoilList.forEach((item, index) => {
            if (item === child[0]) {
              this.inputForm.basicDataGiveoilList.splice(index, 1, child[1])
            }
          })
        }
      },
      addBasicDataGiveoilRow (child) {
        this.$refs.basicDataGiveoilForm.init('add')
      },
      viewBasicDataGiveoilRow (child) {
        this.$refs.basicDataGiveoilForm.init('view', child)
      },
      editBasicDataGiveoilRow (child) {
        this.$refs.basicDataGiveoilForm.init('edit', child)
      },
      delBasicDataGiveoilRow (child) {
        this.inputForm.basicDataGiveoilList.forEach((item, index) => {
          if (item === child && item.id === '') {
            this.inputForm.basicDataGiveoilList.splice(index, 1)
          } else if (item === child) {
            item.delFlag = '1'
            this.inputForm.basicDataGiveoilList.splice(index, 1, item)
          }
        })
      },
      // 表单提交
      doSubmit () {
        this.$refs['inputForm'].validate((valid) => {
          if (valid) {
            this.loading = true
            this.$http({
              url: `/basicdata/standard/basicCheckMainForm/save`,
              method: 'post',
              data: this.inputForm
            }).then(({data}) => {
              if (data && data.success) {
                this.visible = false
                this.$message.success(data.msg)
                this.$emit('refreshDataList')
              }
              this.loading = false
            })
          }
        })
      }
    }
  }
</script>
